<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Suzy OnlineJudge</title>
    <!-- 浏览器可用性校验 -->
    <script>
        // IE 10 and earlier
        if (window.navigator.userAgent.indexOf('MSIE ') > 0 &&
            window.confirm('Your browser is not supported, click \'OK\' to update')) {
            window.location = 'http://outdatedbrowser.com'
        }
    </script>
    <!-- CSS3-加载动画 -->
    <style>
        #app-loader {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -27.5px;
            margin-top: -27.5px;
        }

        #app-loader .loader {
            position: relative;
            width: 42px;
            height: 42px;
            left: 13px;
            bottom: 10px;
            animation: app-loader 5s infinite linear;
        }

        #app-loader .block {
            width: 20px;
            height: 20px;
            position: absolute;
            background: red;
            display: block;
            animation: app-loader_block 1s infinite linear;
        }

        #app-loader .loader-content {
            color: #2b7bb1;
            font-size: 16px;
            font-weight: 600;
            margin-top: 5px;
        }

        #app-loader .block:nth-child(1) {
            background: #2ecc71;
        }

        #app-loader .block:nth-child(2) {
            left: 22px;
            background: #9b59b6;
            animation-delay: .2s;
        }

        #app-loader .block:nth-child(3) {
            top: 22px;
            background: #3498db;
            animation-delay: .4s;
        }

        #app-loader .block:nth-child(4) {
            top: 22px;
            left: 22px;
            background: #f1c40f;
            animation-delay: .6s;
        }

        @keyframes app-loader {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes app-loader_block {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
<!-- js脚本未执行时触发 -->
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>

<div id="app"></div>
<!-- built files will be auto injected -->
<div id="app-loader">
    <div class="loader">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="loader-content">
        <span>Loading...</span>
    </div>
</div>

</body>
</html>